﻿		<script type="text/javascript" src="http://localhost/memonote/scripts/rangy-core.js"> </script>
		<script type="text/javascript" src="http://localhost/memonote/scripts/jquery.textHighlighter.js"> </script> 
		<script type="text/javascript" src="http://localhost/memonote/scripts/jquery.bpopup.min.js"> </script>
		<script type="text/javascript" src="http://localhost/memonote/scripts/jOWL.js"> </script>
		<script type="text/javascript" src="http://localhost/memonote/scripts/jOWL_UI.js"> </script>
		<script type="text/javascript" src="http://localhost/memonote/scripts/jOWLBrowser.js"> </script>
		<script type="text/javascript" src="http://localhost/memonote/scripts/json2.min.js"> </script>
		<script type="text/javascript" src="http://localhost/memonote/scripts/tooltip.js"> </script>
		<script type="text/javascript" src="http://localhost/memonote/scripts/jquery.contextMenu.js"> </script>
		<script type="text/javascript" src="http://localhost/memonote/scripts/ontologymenu.js"> </script>
		<link type="text/css" href="http://localhost/memonote/styles/style.css" rel="stylesheet" media='screen' />
		<link type="text/css" href="http://localhost/memonote/styles/jOWL.css" rel="stylesheet" media='screen' />
		<link type="text/css" href="http://localhost/memonote/styles/tooltip.css" rel="stylesheet" media='screen' />
		<link type="text/css" href="http://localhost/memonote/styles/jquery.contextMenu.css" rel="stylesheet" media='screen' />


<?php 
if(isset($_SESSION["context"])) {
$_SESSION["context"] = "1";
}
else {
$_SESSION["context"] = "0";
}
?>

		<script type="text/javascript">



		$(document).ready(function() {
		
		var highlighter;
		var annoId;
	   // var contextExist = <?php echo (($_SESSION['context'] == "1") ? "true" : "false") ?>;
   
	   
	   if (<?php echo($_SESSION['context'])?> == "1"){     
		}
		else {
		
		displayObjectiveOntologies();
		
		$('#context_to_pop_up').bPopup();
		} 
		

	
		// Context menu function
		
		function unableContextMenu() {

		$(".tooltip.highlighted").contextMenu({
							menu: 'myMenu'
						},
							// on click on delete
							function(action, el, pos) {
							
							
							
							//delete all same annotation ID in once
							if(action=='delete') {
							$('.tooltip.highlighted').each(function(){
					        if ($(this).attr("annoid")==$(el).attr("annoid")) {
					        highlighter.removeHighlights(this);
					        }
				            });
							}
							
		// Ajax call delete annotation from server					
		$.ajax({
					url: "http://localhost:8060/MemoNote/deleteannotationservlet",
					 jsonp: "callback",
					dataType: "jsonp",
					jsonpCallback:'mycallback',
					type: 'GET',
					crossDomain: true,
					data: { 
					annotationId: $(el).attr("annoid"),
					idUser:<?php echo $_SESSION['id_user']; ?>,
					idMission:<?php echo $_SESSION['id_mission']; ?>,
					annotatedText: highlighter.serializeHighlights()
					},
					success: function (data) {
						},
					error:function(jqXHR, textStatus, errorThrown){
						alert(errorThrown);
					  }
				});
							
							
						});
						
						}

				  
					
				
				
					
				

			 // Load all annotations from server to page
			 
					$.ajax({
				url: "http://localhost:8060/MemoNote/getannotationdocument",
				jsonp: "callback",
				dataType: "jsonp",
				jsonpCallback:'mycallback',
				type: 'GET',
				data: { 
				idUser:<?php echo $_SESSION['id_user']; ?>,
				idMission:<?php echo $_SESSION['id_mission']; ?>
				}, 
			
				success: function (data) {
					highlighter.deserializeHighlights(data.annotatedText.toString()); 
					unableContextMenu();
				},
				error:function(jqXHR, textStatus, errorThrown){
					alert(errorThrown);
				  }
			});
			
				
			//ontology visualisation with JOWL
			
			displayObjectiveOntologies();
					
				
					 
					 
					 // Annotation of the selected text with custom css
					 $.textHighlighter.createWrapper = function(options) {
					 
					 if(options.color!='') {
					 
					 // Popup open
					 $('#element_to_pop_up').bPopup({
					 onOpen: function() {  
					}, 
					onClose: function() { 
					// Generating annotation ID
				    annoId = $("#treeview li.focus > span").attr("title")+$.now()+<?php echo $_SESSION['id_user']; ?>+<?php echo $_SESSION['id_mission']; ?> ;
			        
					// add comment and annotationID attribute to annotation
					$('.highlighted').each(function(){
					
					if ($(this).attr("commentaire")=="") {
					$(this).attr("commentaire",$("#com").val());
					$(this).attr("onmouseover","tooltip.pop(this,'"+$(this).attr("commentaire")+"')");
					}
					if ($(this).attr("annoid")=="") {
					$(this).attr("annoid",$.trim(annoId));
					}
				});
					 
				// Ading annotation to the server
				$.ajax({
				url: "http://localhost:8060/MemoNote/addannotationservlet",
				 jsonp: "callback",
				dataType: "jsonp",
				jsonpCallback:'mycallback',
				type: 'GET',
				crossDomain: true,
				data: { 
				objective : $("#treeview li.focus > span").attr("title") ,
				objectiveItem: $("#treeview1 li.focus > span").attr("title") , 
				freeContent: $("#com").val(),
				idUser:<?php echo $_SESSION['id_user']; ?>,
				idMission:<?php echo $_SESSION['id_mission']; ?>,
				annotatedText: highlighter.serializeHighlights(),
				annotationId : annoId
				// importance: $('#importance option:selected').val() ,		
				// trust: $('#trust option:selected').val()
				},
		 
				success: function (data) {
				},
				error:function(jqXHR, textStatus, errorThrown){
					alert(errorThrown);
				  }
			});
					 }
					}, 
					function() {
				  
				});	 
				
				// Update DOM page
				
						return $('<span></span>')
						.attr("class","tooltip")
						.attr("commentaire","")
						.attr("annoid","")
						.addClass(options.highlightedClass)
						.css('background-color', options.color);
				
				
					
						  }
						  else {
						  alert("Vous devez selectionner un crayon");
						  }
						  
				  };
				  

				  // Color selection
					$('.color-picker div.color').click(function() {
					  
					  var color = $(this).attr('color');
					  $('#maincontent').getHighlighter().setColor(color);
					 
					  
				  });
				  
				  $('#maincontent').textHighlighter(
				   
				   {
					onRemoveHighlight: function(highlight) { 
					return true;
					  }, 
					   onBeforeHighlight: function(range) {			
						 return true;
					  },
					   onAfterHighlight: function(highlights, range) {
						// unable context menu to the added annotation
						unableContextMenu();
					  } 
				  });  
				  
				highlighter = $('#maincontent').getHighlighter();	

				  
			  });
			</script>	
			

		<div class="color-picker">
		<?php 
		echo "<div class=\"color\" color=\"#FF6666\" > <img src=\"http://".$_SERVER['SERVER_NAME']."/memonote/Images/red.png\" alt=\"Red pen\"  /> </div> ";
		echo "<div class=\"color\" color=\"#FFFF7B\"> <img src=\"http://".$_SERVER['SERVER_NAME']."/memonote/Images/yellow.png\" alt=\"Yellow pen\"  /> </div> ";
		echo "<div class=\"color\" color=\"#66FF66\"> <img src=\"http://".$_SERVER['SERVER_NAME']."/memonote/Images/green.png\" alt=\"Green pen\"  /> </div> ";
		?>
		</div>
		<ul id="myMenu" class="contextMenu">
		<li class="edit"><a href="#edit">Editer</a></li>
		<li class="delete"><a href="#delete">Supprimer</a></li>
		
		</ul>
		<?php
		include($_SERVER["DOCUMENT_ROOT"]."MemoNote/Pages/annotationForm.php");
		include($_SERVER["DOCUMENT_ROOT"]."MemoNote/Pages/context.php");
		?>

